<template>
	<view>
		<view class="head">
			<text @tap="back"><</text>
			<text class="title">购物车</text>
		</view>
		<view class="cartlist">
			<view class="item" v-for="item in cartList" :key="item.id">
				<view class="info">
					<evan-checkbox shape="square" v-model="item.checked" @change="checked"></evan-checkbox>
					<image :src="item.cover_img" mode=""></image>
					<view class="descr">
						<view>{{item.gname}}</view>
						<view>编号:{{item.pcode}} 价格:¥{{item.price_now}}</view>
						<view>数量:{{item.num}}</view>
					</view>
				</view>
				<view class="operate">
					<view class="btn">-</view>
					<view class="num">{{item.num}}</view>
					<view class="btn">+</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="allcheck"><evan-checkbox shape="square" v-model="allChecked" @change="all">全选</evan-checkbox></view>
			<view class="totalprice">合计:¥{{totalprice}}</view>
			<view class="btn">结算</view>
		</view>
	</view>
</template>

<script>
	import {cartList} from '../../api/cart/cartlist/index.js'
	export default {
		data() {
			return {
				allChecked:false,
				cartList:[],
				totalprice:0
			};
		},
		computed:{
			// totalprice(){
			// 	var total=0;
			// 	this.cartList.forEach(item=>{
			// 		if(item.checked){
			// 			total+=item.num*item.price_now;
			// 		}
			// 	})
			// 	return total;
			// }
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			checked(){
				this.allChecked=this.cartList.every(item=>item.checked==true);
				this.sum()
			},
			all(){
				if(this.allChecked){
					this.cartList.forEach(item=>{
						item.checked=true;
					})
				}else{
					this.cartList.forEach(item=>{
						item.checked=false;
					})
				}
				this.sum()
			},
			sum(){
				var total=0;
				this.cartList.forEach(item=>{
					if(item.checked){
						total+=item.num*item.price_now;
					}
					this.totalprice=total;
				})
			}
		},
		onLoad() {
			// cartList({
			// 	userId:'52aeb3ea2a1f437399fac5e5391a4b2e'
			// }).then(res=>{
			// 	console.log(res)
			// })
			console.log(uni.getStorageSync('cartList'))
			this.cartList=uni.getStorageSync('cartList');
			this.cartList.forEach(item=>{
				item.checked=false;
			});
		}
	}
</script>

<style lang="scss" scoped>
.head{
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 88rpx;
	padding: 20rpx;
	background-color: rgb(53, 78, 68);
	text{
		color: #fff;
		&.title{
			margin-left: 300rpx;
		}
	}
}
.cartlist{
	width: 100%;
	margin-top: 120rpx;
	.item{
		width: 672rpx;
		height: 236rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 40rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;
		.info{
			display: flex;
			align-items: center;
			image{
				width: 136rpx;
				height: 136rpx;
				margin-left: 20rpx;
			}
			.descr{
				margin-left: 40rpx;
				view{
					font-size: 22rpx;
					color: #8D8D8D;
					&:first-child{
						font-size: 26rpx;
						color: #3E3E3E;
					}
				}
			}
		}
		.operate{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.btn{
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 50%;
				background: #F1ECE7;
			}
			.num{
				width: 90rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 30rpx;
				background: #F1ECE7;
				margin: 0 10rpx;
			}
		}
	}
}
.bottom{
	width: 100%;
	height: 150rpx;
	padding: 0 80rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.btn{
		width: 210rpx;
		height: 80rpx;
		background: #354E44;
		border-radius: 28rpx;
		color: #fff;
		font-size: 36rpx;
		line-height: 80rpx;
		text-align: center;
	}
}
</style>
